<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <ul id="ul"></ul>

  <script>
    const total = 10000
    const ul = document.getElementById('ul')
    const once = 20
    const page = total / once
    let index = 0


    function loop(curTotal, curIndex) {
      if (curTotal <= 0) {
        return
      }

      let pageCount = Math.min(once, curTotal)

      requestAnimationFrame(() => {
        for (let i = 0; i < pageCount; i++) {
          let li = document.createElement('li')
          li.innerText = curIndex + i + ':' + ~~(Math.random() * total)
          ul.appendChild(li)
        }

        loop(curTotal - pageCount, curIndex + pageCount)
      })
    }
    loop(total, index)








  </script>
</body>
</html>